<script setup>
import { getProductionZzgd } from "@/api/visual/productionBoard";
import { fontSize } from "@/utils/globalMethod.js";
import moment from "moment";

const key = ref(1);
const optionData = ref([]);
const month = computed(() => {
  return ["", "", "", "", "", ""]
    .reduce((curr, prev, index) => {
      curr.push(Number(moment().subtract(index, "months").format("MM")) + "月");
      return curr;
    }, [])
    .reverse();
});
const option = computed(() => ({
  title: {
    text: "工单产出分析",
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.16),
    },
  },
  xAxis: {
    type: "category",
    data: month.value,
    axisLabel: {
      color: "#ccc1c1",
      fontSize: fontSize(0.12),
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        color: "#2b2c33",
      },
    },
    axisLabel: {
      show: false,
      color: "#ccc1c1",
      fontSize: fontSize(0.12),
      overflow: "break",
      width: 60,
    },
  },
  legend: {
    right: "15",
    top: "2",
    textStyle: {
      color: "#ccc1c1",
      fontSize: 8,
    },
    itemWidth: 14,
    itemHeight: 10,
  },
  grid: {
    bottom: "15%",
    top: "20%",
    left: "15%",
  },
  series: optionData.value,
}));

const loadData = async () => {
  const { data } = await getProductionZzgd();

  optionData.value = data.map((item, index) => {
    return {
      data: [
        Number(data[index].y6.toFixed(0)),
        Number(data[index].y5.toFixed(0)),
        Number(data[index].y4.toFixed(0)),
        Number(data[index].y3.toFixed(0)),
        Number(data[index].y2.toFixed(0)),
        Number(data[index].y1.toFixed(0)),
      ],
      stack: "a",
      type: "bar",
      name: item.db,
      label: {
        show: true,
        position: "top",
        color: "#fff",
        textStyle: {
          fontSize: fontSize(0.12),
        },
      },
    };
  });
};
const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

onMounted(loadData);

onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box13 class="ps_pd10" :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box13>
  </div>
</template>

<style scoped lang="scss"></style>
